<style lang="scss">
    .dialog{
        .img {
            width: 800px;
            display: block;
            transition: .2s;
        }
        .el-dialog{
            background: transparent;
            box-shadow:none;
        }
        .el-dialog__header{
            display: none;
        }
        .el-dialog__body{
            height:100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }
        .box{
            display: flex;
            align-items: center;
            position: fixed;
            bottom: 20px;
            left:50%;
            transform: translateX(-50%);
        }
    }
</style>
<template>
    <el-dialog :visible.sync="dialogVisible" class="dialog" :show-close="false" :fullscreen="true" top="0px">
        <div class="ui flex col-center">
            <img class="img" :src="src" ref="img">
        </div>

        <div class="box">
            <!-- 1.增加图片旋转 -->
            <el-button size="mini" @click="rotateLeft">
                <i class="large icon undo m-0"></i>
            </el-button>
            <el-button size="mini" @click="rotateRight">
                <i class="large icon undo flipped m-0"></i>
            </el-button>

            <!-- 2.增加图片缩放 -->
            <el-button size="mini" @click="enlarge">
                <i class="large icon zoom m-0"></i>
            </el-button>
            <el-button size="mini" @click="shrink">
                <i class="large icon zoom out m-0"></i>
            </el-button>

            <el-button size="mini" @click="close"><i class="large icon power m-0"></i></el-button>
        </div>

    </el-dialog>
</template>
<script>
    export default {
        name: 'ui-img-view',
        props: {
            src: {
                type: String,
                required: true
            },
            visible: {
                type: Boolean,
                required: true
            }
        },
        data() {
            return {
                angle: 0,
                zoom: 1,
                dialogVisible: false,
                imgDom:null
            }
        },
        methods: {
            rotateLeft() {
                this.angle = this.angle - 90
                this.imgDom.style.transform = `rotate(${this.angle}deg)`
            },
            rotateRight() {
                this.angle = this.angle + 90
                this.imgDom.style.transform = `rotate(${this.angle}deg)`
            },
            enlarge() { //放大
                if (this.zoom < 5) {
                    this.zoom++
                    this.imgDom.style.width = this.imgDom.clientWidth + 100 + 'px'
                }
            },
            shrink() { //缩小
                if (this.zoom > 1) {
                    this.zoom--
                    this.imgDom.style.width = this.imgDom.clientWidth - 100 + 'px'
                }
            },
            close(){
                this.$emit('update:visible', false)
            }
        },
        watch: {
            visible(v) {
                this.dialogVisible = v
                if (v) {
                    this.$nextTick(() => {
                        this.imgDom = this.$refs['img']
                    })
                }
            },
            dialogVisible() {
                this.$emit('update:visible', this.dialogVisible)
            }
        },
    }
</script>
